import React, { useState, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card, Typography } from 'antd';
import { SearchInput } from '@/components/search/SearchInput';
import { useSearchActions } from '@/stores';
import { generateMockSuggestions } from '@/services/api';

const { Title, Paragraph } = Typography;

/**
 * 首页组件
 */
const HomePage: React.FC = () => {
  const navigate = useNavigate();
  const { setQuery, performSearch } = useSearchActions();
  const [suggestions, setSuggestions] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  // 处理搜索
  const handleSearch = useCallback(async (query: string) => {
    if (!query.trim()) return;
    
    setQuery(query);
    navigate('/search');
    await performSearch(query);
  }, [setQuery, navigate, performSearch]);

  // 处理输入变化（获取建议）
  const handleInputChange = useCallback(async (value: string) => {
    if (!value.trim()) {
      setSuggestions([]);
      return;
    }

    setLoading(true);
    try {
      // 模拟获取搜索建议
      const mockSuggestions = generateMockSuggestions(value, 5);
      setSuggestions(mockSuggestions);
    } catch (error) {
      console.error('获取搜索建议失败:', error);
    } finally {
      setLoading(false);
    }
  }, []);

  // 处理建议选择
  const handleSuggestionSelect = useCallback((suggestion: any) => {
    handleSearch(suggestion.text);
  }, [handleSearch]);

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
      <div className="container mx-auto px-4 py-16">
        {/* 主标题区域 */}
        <div className="text-center mb-12">
          <Title level={1} className="text-4xl md:text-6xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4">
            智能搜索平台
          </Title>
          <Paragraph className="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
            基于 React 19 + TypeScript 构建的现代化搜索应用，提供智能搜索、个性化推荐和数据可视化功能
          </Paragraph>
        </div>

        {/* 搜索区域 */}
        <div className="max-w-4xl mx-auto mb-16">
          <SearchInput
            placeholder="搜索任何内容..."
            onSearch={handleSearch}
            onChange={handleInputChange}
            onSuggestionSelect={handleSuggestionSelect}
            suggestions={suggestions}
            loading={loading}
            enableVoiceSearch={true}
            enableImageSearch={true}
            size="large"
            autoFocus={true}
            className="shadow-lg"
          />
        </div>

        {/* 功能特性卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
          <Card 
            className="hover:shadow-lg transition-shadow duration-300"
            cover={
              <div className="h-48 bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
                <svg className="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
              </div>
            }
          >
            <Card.Meta
              title="智能搜索"
              description="支持文本、语音、图片多模态搜索，提供实时搜索建议和智能纠错功能"
            />
          </Card>

          <Card 
            className="hover:shadow-lg transition-shadow duration-300"
            cover={
              <div className="h-48 bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center">
                <svg className="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </div>
            }
          >
            <Card.Meta
              title="个性化推荐"
              description="基于用户行为和偏好，提供个性化内容推荐和热门趋势分析"
            />
          </Card>

          <Card 
            className="hover:shadow-lg transition-shadow duration-300"
            cover={
              <div className="h-48 bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center">
                <svg className="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
              </div>
            }
          >
            <Card.Meta
              title="数据可视化"
              description="提供丰富的图表和仪表板，直观展示搜索数据和用户行为分析"
            />
          </Card>
        </div>

        {/* 热门搜索 */}
        <div className="max-w-4xl mx-auto">
          <Title level={3} className="text-center mb-8">
            热门搜索
          </Title>
          <div className="flex flex-wrap justify-center gap-3">
            {[
              'React 19 新特性',
              'TypeScript 5.0',
              'Vite 构建优化',
              'CSS Grid 布局',
              'Web 性能优化',
              'AI 编程助手',
              '前端开发趋势',
              'JavaScript ES2024'
            ].map((keyword, index) => (
              <button
                key={index}
                onClick={() => handleSearch(keyword)}
                className="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-full text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-blue-300 dark:hover:border-blue-600 transition-colors duration-200"
              >
                {keyword}
              </button>
            ))}
          </div>
        </div>

        {/* 统计信息 */}
        <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
          <div>
            <div className="text-3xl font-bold text-blue-600 dark:text-blue-400">1M+</div>
            <div className="text-gray-600 dark:text-gray-400">搜索次数</div>
          </div>
          <div>
            <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">50K+</div>
            <div className="text-gray-600 dark:text-gray-400">活跃用户</div>
          </div>
          <div>
            <div className="text-3xl font-bold text-green-600 dark:text-green-400">99.9%</div>
            <div className="text-gray-600 dark:text-gray-400">可用性</div>
          </div>
          <div>
            <div className="text-3xl font-bold text-orange-600 dark:text-orange-400">&lt; 100ms</div>
            <div className="text-gray-600 dark:text-gray-400">响应时间</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HomePage;
